@progress-height: .25rem;
@progress-buffer-color: fade(@base-color, 20%);

progress {
    -webkit-appearance: none;

    &::-webkit-progress-bar {
        background-color: transparent;
    }

    &::-webkit-progress-value {
        background-color: @base-color;
    }

    &:indeterminate {
        background-image: linear-gradient(-45deg, transparent 33%, @progress-buffer-color 33%, @progress-buffer-color 66%, transparent 66%);
        background-size: 1.5rem @progress-height * 3, 100% 100%, 100% 100%;
        -webkit-animation: progress-buffering 5s linear 12, progress-buffering 5s 60s steps(10) 108;
    }
}

@-webkit-keyframes progress-buffering {
    100% { background-position: -100px 0px; }
}

@-webkit-keyframes animate-stripes {
    100% {
        background-position: 100px 0;
    }
}
